<template>
  <Home>
    <!-- 头部 -->
    <div class="data">
      <div class="title">矛盾纠纷信息</div>
      <!-- 搜索框 -->
      <div class="content">
        <span>
          矛盾纠纷名称:
          <input class="userinput" placeholder="请输入" v-model="value" />
        </span>
        <a-button
          style="margin-left: 0.385621rem"
          type="primary"
          @click="changename(value)"
          >查询信息</a-button
        >
        <a-button
          style="margin-left: 0.137255rem"
          type="primary"
          @click="addshoping"
          >添加信息</a-button
        >
      </div>
    </div>

    <!-- 表格部分 -->
    <div class="container">
      <el-table
        :data="
          tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        class="container"
      >
        <el-table-column
          show-overflow-tooltip
          align="center"
          prop="name"
          label="纠纷名称"
           
        />
        <!-- <el-table-column prop="remarks" label="寺庙简介" width="170" /> -->
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="createTime"
          label="发生时间"
           
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="place"
          label="发生地点"
           
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="police"
          label="录入人员"
           
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="report"
          label="评价报告"
           
        />
        <el-table-column
          align="center"
          show-overflow-tooltip
          prop="details"
          label="纠纷详情"
           
        />
        <el-table-column
          align="center"
          prop="createTime"
          :formatter="dataFormat"
          label="创建时间"
           
        ></el-table-column>
        <el-table-column label="操作"   align="center">
          >
          <template slot-scope="scope">
            <el-button
              @click="handleClickDelate(scope.row.id)"
              type="text"
              size="small"
              >删除</el-button
            >
            <el-button
              @click="handleClickUpdata(scope.row)"
              type="text"
              size="small"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 弹窗部分 -->
    <el-dialog title="更改矛盾纠纷信息" :visible.sync="dialogFormVisible">
      <el-form>
        <el-form-item label="纠纷名称" :label-width="formLabelWidth">
          <el-input v-model="from.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="事态预判" :label-width="formLabelWidth">
          <el-input v-model="from.anticipation" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="发生时间" :label-width="formLabelWidth">
          <el-input v-model="from.createTime" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="涉案人员" :label-width="formLabelWidth">
          <el-input v-model="from.involved" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="相关材料" :label-width="formLabelWidth">
          <el-input v-model="from.materials" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="纠纷详情" :label-width="formLabelWidth">
          <el-input v-model="from.details" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="解决办法及听取建议" :label-width="formLabelWidth">
          <el-input v-model="from.suggest" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="录入人员" :label-width="formLabelWidth">
          <el-input v-model="from.police" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="评价报告" :label-width="formLabelWidth">
          <el-input v-model="from.report" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="发生地点" :label-width="formLabelWidth">
          <el-input v-model="from.place" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item
          label="纠纷名称(民事案件，刑事案件)"
          :label-width="formLabelWidth"
        >
          <el-input v-model="from.name" autocomplete="off"></el-input>
        </el-form-item>
        <a-upload
          name="userfile"
          :multiple="true"
          action="/goimg"
          :data="extraData"
          @change="handleChange"
        >
          <a-button style="margin-top: 0.098039rem">
            <a-icon type="upload" />上传图片
          </a-button>
        </a-upload>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="changeOK(templet)">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页器 -->
    <div class="block" style="margin-top: 0.098039rem">
      <el-pagination
        align="center"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[1, 5, 10, 20]"
        :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="tableData.length"
      >
      </el-pagination>
    </div>
  </Home>
</template>

<script>
import moment from "moment";
import Home from "@/components/Home/index";
// import { listTemple } from "@/api/getInfoList";
import { listContradiction } from "@/api/getInformation";
import { deleteContradiction } from "@/api/deleteInformation";
import { createContradiction } from "@/api/createInformation";
import { updateContradiction } from "@/api/updateInformation";

export default {
  methods: {
    //每页条数改变时触发 选择一页显示多少行
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.currentPage = 1;
      this.pageSize = val;
    },
    //当前页改变时触发 跳转其他页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.currentPage = val;
    },
    //时间戳
    dataFormat: function (row) {
      var data = row.createTime / 1000;
      if (data == undefined) {
        return "";
      }
      return moment.unix(data).format("YYYY-MM-DD");
    },

    //封装更新方法
    async Update(id, params) {
      console.log(params);
      const data = await updateContradiction(id, params);
      return data;
    },

    //封装创建方法
    async Create(parmars) {
      console.log(parmars);
      const data = await createContradiction(parmars);
      return data;
    },

    // 封装获取总表方法
    async List() {
      const data = await listContradiction(this.params);
      this.tableData = data.list;
      console.log(this.tableData);
    },

    // 封装name查询方法
    async NameList(value) {
      const data = await listContradiction({ name: value, page: 1, perPage: 1000 });
      return data;
    },

    // 封装删除方法
    async Delete(id) {
      const data = await deleteContradiction(id);
      return data;
    },

    //上传图片
    extraData(file) {
      return { name: file.name };
    },
    handleChange(info) {
      // console.log(info);
      // const SuContradictionimg = [];
      // for (let i of info.fileList) {
      //   console.log(i.response.data.imgid);
      //   SuContradictionimg.push(i.response.data.imgid);
      // }
      // console.log(SuContradictionimg);
      // // const tempimg = info.file.response
      // this.from.SuContradictionimg = SuContradictionimg;
      const img = info.fileList[info.fileList.length - 1].response.data.imgid;
      this.from.img = img;
    },

    //点击编辑弹出框
    handleClickUpdata(row) {
      this.id = row.id;
      this.dialogFormVisible = true;
      this.from = row;
      this.templet = 1;
    },

    //调用name查询
    changename(value) {
      console.log(value);
      this.NameList(value).then((res) => {
        console.log(res);
        this.tableData = res.list;
      });
    },

    //调用删除方法
    handleClickDelate(id) {
      //   console.log(row);
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // console.log(id);
          this.Delete(id).then((res) => {
            console.log(res);
            if (res == true)
              this.$message({
                type: "success",
                message: "删除成功!",
              });
            else
              this.$message({
                type: "error",
                message: "删除失败!",
              });
          });
          this.List();
          // this.$message({
          //   type: "success",
          //   message: "删除成功!",
          // });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    //点击添加商品弹出框
    addshoping() {
      this.dialogFormVisible = true;
      //给templet传值，1为更新/编辑  ，  2 为添加
      this.templet = 2;
    },

    //点击弹框确认按钮
    changeOK(templet) {
      this.dialogFormVisible = false;
      //调用创建方法
      if (templet == 2) {
        delete this.from.id;
        delete this.from.createTime;
        // delete this.from.stationName;
        //this.from.status = Number(this.from.status);
        this.Create(this.from).then((res) => {
          if (res == true)
            this.$message({
              type: "success",
              message: "创建成功!",
            });
          else
            this.$message({
              type: "error",
              message: "创建失败!",
            });
        });
        this.List();
      }
      //调用更新方法
      else if (templet == 1) {
        console.log("templet = 1");
        const id = this.id;
        delete this.from.id;
        delete this.from.stationName;
        delete this.from.createTime;
        //this.from.status = Number(this.from.status);
        this.Update(id, this.from).then((res) => {
          if (res == true)
            this.$message({
              type: "success",
              message: "更新成功!",
            });
          else
            this.$message({
              type: "error",
              message: "更新失败!",
            });
        });
        this.List();
      }
    },
  },

  data() {
    return {
      currentPage: 1, // 当前页码
      total: 20, // 总条数
      pageSize: 10, // 每页的数据条数
      imageUrl: " ",
      id: "",
      templet: 0,
      count: 0,
      params: {
        page: 1,
        perPage: 1000,
      },
      formLabelWidth: ".653595rem ",
      dialogFormVisible: false,
      value: "",
      // 表格内容
      tableData: [],
      //弹框的内容
      from: {
        anticipation: "",
        details: "",
        name: "",
        involved:[],
        materials:"",
        suggest: "",
        place: "",
        report: "",
        remarks: "",
        police:""
      },
    };
  },
  components: {
    Home,
  },
  mounted() {
    this.List();
  },
};
</script>
<style scoped>
.container {
  width: 8.006536rem /* 1225/153 */;
  margin: 0 auto;
}
.userinput {
  width: 2.091503rem /* 320/153 */;
  border-radius: 0.039216rem /* 6/153 */;
}
</style>